<template>
  <div style="height: 100%">
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item-group>
            <el-menu-item index="/info">个人信息</el-menu-item>
            <el-menu-item index="/History">我的订单</el-menu-item>

            <el-menu-item index="/order">我的预约</el-menu-item>

            <el-menu-item index="/house">我的房源</el-menu-item>
            <el-menu-item index="/commodity">我的商品</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-col>
      <el-row style="display: flex;justify-content: flex-end">
        <el-button class="btn" @click="dialogFormVisible = true">上架商品</el-button>

        <el-dialog title="上架" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="房源编号" :label-width="formLabelWidth">
              <el-select v-model="form.id" placeholder="请选择房源">
                <el-option label="171250595" value="shanghai"></el-option>
                <el-option label="171250594" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品标题" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="租金" :label-width="formLabelWidth">
              <el-input v-model="form.amount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出租方式" :label-width="formLabelWidth">
              <el-select v-model="form.type" placeholder="请选择出租方式">
                <el-option label="整租" value="shanghai"></el-option>
                <el-option label="合租" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-row>
      <el-col :span="20">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="date"
            label="商品编号"
            mid-width="25px">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="租金"
            mid-width="25px">
          </el-table-column>
          <el-table-column
            prop="name"
            label="出租方式"
            mid-width="25px">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            mid-width="25px">
            <template slot-scope="scope">
              <el-button @click="open2" type="text" size="small">查看</el-button>
              <el-button @click="open(scope.row.$index)" type="text" size="small">下架</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      value1: '',
      value2: '',
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form: {
        name: '',
        id: '',
        amount: '',
        type: ''
      },
      tableData: [
        { date: '171250501', amount: '500/月', name: '合租', 操作: '取消收藏' },
        { date: '151221301', amount: '1300/月', name: '整租', 操作: '取消收藏' }
      ]
    }
  },
  created () {
    this.initChargeHistory()
    this.initSpendHistory()
  },
  methods: {
    open2 () {
      this.$router.push('/movieinfo')
    },
    open (row) {
      this.$confirm('下架商品将无法撤回, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功下架!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    getDate (n) {
      var dateTime = new Date()
      dateTime = dateTime.setDate(dateTime.getDate() + n - 1)
      dateTime = new Date(dateTime)
      return dateTime.toLocaleDateString()
    }
  }

}
</script>

<style scoped>

</style>
